<template>
  <div slot="header" class="container-header head-form">
    <Form class="search">
      <Row>
        <i-col span="8">
          <FormItem label="部门选择">
            <Cascader
              v-model="value"
              :data="departmentTree"
              :change-on-select="true"
              placeholder="请选择地区"
              @on-change="onSelectDpt"
            />
          </FormItem>
          <FormItem label="门店名称">
            <Input v-model.trim="list.form.storeName" placeholder="请输入门店名称" @on-enter="onSearchBtnClick" />
          </FormItem>
          <FormItem label="门店类型">
            <SelectList
              v-model="list.form.storeTypes"
              multiple
              list-type="storeTypeList"
            />
          </FormItem>
          <!-- <FormItem label="是否建店">
            <Select v-model="list.form.isEstablishment" clearable placeholder="是否建店门店">
              <Option label="是" value="true"></Option>
              <Option label="否" value="false"></Option>
            </Select>
          </FormItem> -->
        </i-col>
        <i-col span="7">
          <FormItem label="经销商选择">
            <!-- <DistributorSelect v-model="list.form.distributorId"  /> -->
            <!-- <SelectList ref="dealerList" listType='dealerList' v-model='list.form.distributorId' /> -->
            <DistributorSelectName
              v-model="list.form.distributorName"
              placeholder="经销商选择"
              :data="prizeList"
              @enter="onSearchBtnClick"
              @search="getAllPrizes"
              @focus="onFocus"
              @select="onSearchBtnClick"
              @clear="prizeList = []"
            />
          </FormItem>
          <FormItem label="审核状态">
            <Select v-model="list.form.auditStatus" placeholder="请选择审核状态">
              <Option label="待审核" :value="0" />
              <Option label="审核中" :value="1" />
              <Option label="审核未通过" :value="2" />
              <Option label="审核通过" :value="3" />
            </Select>
          </FormItem>
          <FormItem label="类型">
            <Select v-model="list.form.applyTypes" multiple placeholder="请选择类型">
              <Option label="新增" :value="0" />
              <Option label="变更" :value="1" />
              <Option label="解约" :value="2" />
              <Option label="续签" :value="3" />
            </Select>
          </FormItem>
        </i-col>
        <i-col span="7">
          <FormItem label="门店来源">
            <Select v-model="list.form.signSource" clearable placeholder="请选择门店来源">
              <Option label="线上" :value="0" />
              <Option label="线下" :value="1" />
            </Select>
          </FormItem>
          <FormItem label="是否建店">
            <Select v-model="list.form.isEstablishment" clearable placeholder="是否建店门店">
              <Option label="是" value="true" />
              <Option label="否" value="false" />
            </Select>
          </FormItem>
          <FormItem label="门头编号">
            <Input v-model.trim="list.form.storeNo" placeholder="请输入门头编号" @on-enter="onSearchBtnClick" />
          </FormItem>
          <!-- <FormItem label="门店类型">
            <SelectList
              multiple
              v-model="list.form.storeTypes"
              listType="storeTypeList"
            />
          </FormItem> -->
        </i-col>
        <i-col class-name="search" span="2">
          <Button class="btn-search large" type="primary" icon="ios-search" @click="onSearchBtnClick" />
        </i-col>
      </Row>
    </Form>
  </div>
</template>

<script>
import SelectList from '@/components/SelectList'
import DistributorSelectName from '@/components/DistributorSelectName'

export default {
  components: {
    SelectList,
    DistributorSelectName
  },
  props: {
    list: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      prizeList: [],
      value: [],
      departmentTree: []
    }
  },
  watch: {
  },
  mounted () {
    this.getDptTree()
    this.value = [this.list.form.officeId, this.list.form.depId]
  },
  methods: {
    getAllPrizes () {
      let param = {
        keyword: this.list.form.distributorName,
        departId: this.list.form.depId ? this.list.form.depId : this.list.form.officeId
      }
      this.$jsonPost('/department/queryDistributorDepartment', param).then(data => {
        this.prizeList = (data.records || []).map(item => item.distributorName)
      })
    },
    onFocus () {
      this.getAllPrizes()
    },
    getDptTree () {
      this.$jsonPost('department/listDepartmentTree').then(res => {
        const func = (arr) => {
          arr.forEach(item => {
            item.label = item.name
            item.value = item.id
            if (item.children && item.children.length) {
              func(item.children)
            }
          })
        }
        func(res)
        this.departmentTree = res
      })
    },
    onSelectDpt (val) {
      let [d, a] = val
      this.list.form.officeId = d
      this.list.form.depId = a
      let id = val[val.length - 1]
      if (!id) return
      let obj = {
        departId: id,
        current: 1,
        size: 9999,
        isPage: false
      }
      this.$refs.dealerList.getListDispath('getDealerListByDpt', obj)
    },
    onSelectDealer (v) {
      if (v) {
        this.list.form.distributorId = v
      } else {
        this.list.form.distributorId = ''
      }
    },
    onSearchBtnClick () {
      this.$emit('onSearchBtnClick')
    },
    onAddBtnClick () {
      this.$emit('onAddBtnClick')
    }
  }
}
</script>
